{% include 'header.html' %}
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<style>
    .draggable {
        cursor: move;
        user-select: none;
    }

    .dropzone {
        min-height: 200px;
        border: 2px dashed #ccc;
        padding: 10px;
    }
</style>

<h1 class="text-2xl font-bold mb-4">拖拽生成策略交易系统</h1>
    <div class="flex space-x-4">
        <div class="w-1/3 bg-white p-4 rounded shadow">
            <h2 class="text-lg font-bold mb-2">策略组件列表</h2>
            <div class="draggable bg-blue-100 p-2 mb-2 rounded" draggable="true">买入信号：均线金叉</div>
            <div class="draggable bg-blue-100 p-2 mb-2 rounded" draggable="true">卖出信号：均线死叉</div>
            <div class="draggable bg-blue-100 p-2 mb-2 rounded" draggable="true">止损条件：亏损 5%</div>
            <div class="draggable bg-blue-100 p-2 mb-2 rounded" draggable="true">止盈条件：盈利 10%</div>
        </div>
        <div class="w-2/3 bg-white p-4 rounded shadow dropzone" id="strategy-dropzone">
            <h2 class="text-lg font-bold mb-2">生成的策略</h2>
            <p class="text-gray-500">将策略组件拖拽到此处生成策略</p>
        </div>
    </div>
    <button id="submit-strategy" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4">
        提交策略
    </button>
    <script>
        const draggables = document.querySelectorAll('.draggable');
        const dropzone = document.getElementById('strategy-dropzone');
        const submitButton = document.getElementById('submit-strategy');

        draggables.forEach(draggable => {
            draggable.addEventListener('dragstart', () => {
                draggable.classList.add('dragging');
            });

            draggable.addEventListener('dragend', () => {
                draggable.classList.remove('dragging');
            });
        });

        dropzone.addEventListener('dragover', e => {
            e.preventDefault();
            dropzone.classList.add('bg-gray-200');
        });

        dropzone.addEventListener('dragleave', () => {
            dropzone.classList.remove('bg-gray-200');
        });

        dropzone.addEventListener('drop', e => {
            e.preventDefault();
            dropzone.classList.remove('bg-gray-200');
            const draggingElement = document.querySelector('.dragging');
            const newElement = draggingElement.cloneNode(true);
            newElement.draggable = false;
            newElement.classList.remove('dragging');
            dropzone.appendChild(newElement);
        });

        submitButton.addEventListener('click', () => {
            const strategyComponents = Array.from(dropzone.children).map(child => child.textContent);
            fetch('/strategy/submit-strategy', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ components: strategyComponents })
            })
           .then(response => response.json())
           .then(data => {
                alert(data.message);
            });
        });
    </script>
{% include 'footer.html' %}